<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授课计划表计算器</title>
</head>
<style>
    body {
        margin: 0;
        height: 100vh;
    }

    .container {
        padding: 10px 10px 0px 30px;
    }

    #app {
        display: flex;
        background: #fff5ae;
        height: 100%;
    }

    .begin-time input {
        width: 60px;
    }

    .week-items {
        display: flex;
        flex-direction: column;
        width: 500px;
    }

    .week-row {
        display: flex;
        flex-direction: row;
        text-align: center;
    }

    .week-row .row10 {
        flex: 2;
    }

    .week-row .row5 {
        flex: 0.5;
    }

    .week-row .row3 {
        flex: 0.3;
    }

    .week-row .row3,
    .week-row .row5,
    .week-row .row10 {
        border: 1px solid #c16200;
        display: flex;
        flex-direction: column;
    }

    .week-row .input {
        flex-direction: row;
    }

    input {
        flex: 1;
        width: 0;
    }

    .result {
        flex: 1;
        box-shadow: 0 0 10px #ffa42fc9;
        margin: 20px;
        border-radius: 10px;
        padding: 0 25px;
    }

    .compute-btn {
        display: flex;
        padding: 2px 0;
    }

    .compute-btn button {
        width: 60px;
        margin-left: auto;
    }

    .add-btn {
        display: flex;
        padding: 2px 0;
    }

    .add-btn button {
        margin-left: auto;
    }

    .result .copy-btn {
        text-align: right;
        width: 500px;
    }

    .result .result-table {
        height: 75%;
        overflow-y: scroll;
        width: 520px;
        box-shadow: inset 0 0 4px #ffa42fc9;
    }
</style>

<body>
    <div id="app">
        <div class="container">
            <h1>授课计划表计算器</h1>
            <div class="begin-time">
                <label>第一周时间：</label>
                <input v-model="beginTime.year">年
                <input v-model="beginTime.month">月
                <input v-model="beginTime.day">日
            </div>
            <div class="compute-btn">

                <button @click="compute">计算</button>
            </div>
            <div class="week-items">
                <div class="week-row">
                    <div class="row3">序号</div>
                    <div class="row10">周数</div>
                    <div class="row5">周几</div>
                    <div class="row5">节数</div>
                    <div class="row5">地点</div>
                    <div class="row5">删除</div>
                </div>
                <div class="week-row" v-for="(item,index) in items">
                    <div class="row3">{{index+1}}</div>
                    <div class="row10 input">
                        <input type="text" v-model="item.weeknum">
                    </div>
                    <div class="row5 input">
                        <input type="text" v-model="item.week">
                    </div>
                    <div class="row5 input">
                        <input type="text" v-model="item.section">
                    </div>
                    <div class="row5 input">
                        <input type="text" v-model="item.place">
                    </div>
                    <div class="row5">
                        <button @click="removeItem(index)">删除</button>
                    </div>

                </div>

            </div>
            <div class="add-btn">
                <button @click="addItem">添加条目</button>
            </div>
        </div>
        <div class="result">
            <h1>结果</h1>
            <div class="copy-btn">

                <button style="width: 80px;" :disabled="copybtn == '复制成功'" @click="copyToClipboard">{{copybtn}}</button>
            </div>
            <div class="result-table">

                <table border="1" cellspacing="0" cellspadding="0" width="500" style="text-align: center;">
                    <tbody>
                        <tr>
                            <th>次序</th>
                            <th>周次</th>
                            <th>星期</th>
                            <th>地点</th>
                        </tr>
                        <tr v-for="(item,index) in result">
                            <td>{{index+1}}</td>
                            <td>{{item.weekstring}}</td>
                            <td>{{item.section}}</td>
                            <td>{{item.place}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</body>
<script type="module">
    import { createApp } from '/lib/vue-esm.js'
    const hhf = ""
    createApp({
        data() {
            return {
                beginTime: {
                    year: "2025",
                    month: "9",
                    day: "1"
                },
                items: [
                    {
                        weeknum: "1-5,7-17",
                        week: "1",
                        section: "7-8",
                        place: "C201"
                    },
                    {
                        weeknum: "1-4,7-11",
                        week: "3",
                        section: "5-6",
                        place: "C201"
                    },
                    {
                        weeknum: "12-17",
                        week: "5",
                        section: "5-6",
                        place: "书苑616"
                    },
                    {
                        weeknum: "4",
                        week: "7",
                        section: "3-4",
                        place: "C201"
                    }
                ],
                result: [],
                copybtn: "复制",
            }
        },
        methods: {
            addItem() {
                this.items.push({
                    weeknum: "",
                    week: ""
                })
            },
            removeItem(index) {
                this.items.splice(index, 1);
            },

            compute() {
                let result = [];
                this.items.forEach(item => {
                    let weeknums = item.weeknum.split(',');
                    weeknums.forEach(weekonce => {
                        let spaceonce = weekonce.split('-');
                        let startWeek = 0;
                        let endWeek = 0;
                        if (spaceonce.length == 1) {
                            startWeek = spaceonce[0];
                            endWeek = spaceonce[0];
                        } else {
                            startWeek = spaceonce[0];
                            endWeek = spaceonce[1];
                        }


                        try {
                            let dates = this.findDatesInRange(
                                Number(this.beginTime.year), Number(this.beginTime.month), Number(this.beginTime.day),
                                Number(startWeek), Number(endWeek), Number(item.week),
                                item.section,
                                item.place
                            );
                            result = result.concat(dates);
                        } catch (error) {
                            console.log(error);
                        }
                    })
                })
                // 根据year month day 排序
                result.sort((a, b) => {
                    if (a.year != b.year) {
                        return a.year - b.year;
                    }
                    if (a.month != b.month) {
                        return a.month - b.month;
                    }
                    return a.day - b.day;
                })
                this.result = result;
            },
            findDatesInRange(startYear, startMonth, startDay, startWeekNumber, endWeekNumber, dayOfWeek, section, place) {
                let dates = [];
                startWeekNumber = Number(startWeekNumber);
                endWeekNumber = Number(endWeekNumber);
                for (let week = startWeekNumber; week <= endWeekNumber; week++) {
                    let weekDay = ['一', '二', '三', '四', '五', '六', '日'];
                    let weekDayCN = weekDay[dayOfWeek - 1];
                    let date = {
                        section: "星期" + weekDayCN + hhf + "(" + section + "节)",
                        place: place,
                        ...this.findDateInRangeSingle(startYear, startMonth, startDay, week, dayOfWeek)
                    };
                    dates.push(date);
                }
                return dates;
            },
            findDateInRangeSingle(startYear, startMonth, startDay, weekNumber, dayOfWeek) {
                let startDate = new Date(startYear, startMonth - 1, startDay);
                let firstDayOfWeek = startDate.getDay();
                let daysDiff = (weekNumber - 1) * 7 + (dayOfWeek - firstDayOfWeek);
                let targetDate = new Date(startDate.getTime() + daysDiff * 24 * 60 * 60 * 1000);
                if (targetDate >= startDate) {
                    return {
                        weekstring: `第${weekNumber}周${hhf}(${targetDate.getMonth() + 1}.${targetDate.getDate() < 10 ? '0' + targetDate.getDate() : targetDate.getDate()})`,
                        year: targetDate.getFullYear(),
                        month: targetDate.getMonth() + 1,
                        day: targetDate.getDate()
                    };
                } else {
                    throw new Error("输入日期已过本周周" + dayOfWeek);
                }
            },
            copyToClipboard() {
                // 构建表头
                let content = '次序\t周次\t星期\t地点\n';


                // 构建表格内容，使用制表符分隔，Excel会自动识别为列
                this.result.forEach((item, index) => {
                    content += `${index + 1}\t${item.weekstring}\t${item.section}\t${item.place}\n`;
                });

                // 复制到剪贴板
                navigator.clipboard.writeText(content).then(() => {
                    this.copybtn = "复制成功";
                    setTimeout(() => {
                        this.copybtn = "复制";
                    }, 500);
                }).catch(err => {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制');
                });
            }
        }
    }).mount('#app')
</script>

</html>